<template>
  <div>
    <div
        class="singleHistoryItem flex"
        v-for="(item,index) in list" :key="'history'+index"
    v-show="searchShow(item)">
      <div v-if="dot" class="isDone" :class="{done:item.done}"></div>
      <div class="right">
        <p class="title textB">{{ item.title }}</p>
        <div class="stateRow flex flex-between">
          <p class="time">{{ item.time }}到达</p>
          <div>
            <span class="textB" v-if="item.done===false">正在处理...</span>
            <span class="state textB">{{ item.doneTime }}</span>
            <span class="state textB" v-if="item.done===true">办结</span>
          </div>
        </div>
        <div class="contentRow">
          <div class="content">
            <span v-if="item.agree===true" class="textB">[同意]</span>
            <span v-if="item.agree===false" class="textR">[退回]</span>
            <span v-if="item.agree===null" class="textB">暂无</span>
            <span class="textB">{{ item.content }}</span>
          </div>
          <div class="contact">
            <p>{{ item.contacter }} {{ item.contactPhone }}</p>
          </div>
        </div>
      </div>

    </div>
  </div>

</template>
<script>

export default {
  name: "singleHistoryItem",
  props: {
    dot: {
      type: Boolean,
      default: true
    },
    searchValue:{
      type:String,
      default:""
    },
    list:{
      type:Array,
      default(){
        return[
          {
            done:false,agree:true,
            title:"title",
            time:"2019-06-03 15:05",
            content:"同意同意",
            contacter:"**公司",
            contactPhone:"13548568741",
            doneTime:""
          },
        ]
      }
    }
  },
  data() {
    return {

    }
  },
  methods:{
    searchShow(item){
      let isShow=false;
      if(item.title.indexOf(this.searchValue)>-1) isShow=true;
      else if(item.content.indexOf(this.searchValue)>-1&&this.searchValue!=="同意") isShow=true;
      else if(item.contacter.indexOf(this.searchValue)>-1) isShow=true;
      else if(item.contactPhone.indexOf(this.searchValue)>-1) isShow=true;
      else if(this.searchValue==="同意"&&item.agree===true) isShow=true;
      else if(this.searchValue==="不同意"&&item.agree===false) isShow=true;
      return isShow;
    }
  }
}
</script>

<style lang="less" scoped>
.isDone {
  width: .4rem;
  height: .4rem;
  background-color: #4693FE;
  //background-color: #BDBDBD;
  border-radius: 50%;
  margin: .1rem .2rem 0 0;
}

.done {
  background-color: #BDBDBD;
}

.right {
  .title {
    font-size: .45rem;
  }

  .stateRow {
    width: 8rem;
    margin: .2rem 0;
    font-size: .3rem;
  }

  .contentRow {
    background-color: #F8F8F8;
    font-size: .4rem;
    padding: .4rem;

    .contact {
      margin-top: .4rem;
      text-align: right;
    }
  }
}

.textB {
  color: #000;
}

.textR {
  color: red;
}
</style>